<template>
  <div class="form">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="80px"
      class="demo-ruleForm"
    >
      <!-- <span
        style="
          color: white;
          font-size: 30px;
          text-align: center;
          display: block;
          margin-bottom: 30px;
        "
        >Login</span
      > -->
      <!-- 登录界面的logo -->
      <div class="login_logo"></div>
      <el-form-item
        label="账号"
        prop="account"
        style="width: 90%; min-width: 200px"
      >
        <el-input v-model.number="ruleForm.account"></el-input>
      </el-form-item>
      <el-form-item
        label="密码"
        prop="pass"
        style="width: 90%; min-width: 200px; color: #fff"
      >
        <el-input
          type="password"
          v-model="ruleForm.pass"
          autocomplete="off"
          style="margin-bottom: 5px"
        ></el-input>
      </el-form-item>
      <el-form-item
        style="display: flex; justify-content: center; margin-right: 80px"
      >
        <!-- <el-button type="primary" @click.native.prevent="getLogin" :loading="loginLoading">登录</el-button> -->
        <el-button type="primary" @click="getLogin" :loading="loginLoading">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 测试接口
import crypto from 'crypto'
import qs from 'qs'
// import { login, findByToken } from '@/api/login.js'
import { login } from '@/api/login.js'
import '@/mock/default.js'
export default {
  data () {
    var checkAccount = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('账户不能为空'))
      } else {
        if (this.ruleForm.checkAccount !== '') {
          this.$refs.ruleForm.validateField('check')
        }
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    return {
      loginLoading: false,
      ruleForm: {
        account: '',
        pass: ''
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        account: [
          { validator: checkAccount, trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    // this.getLogin()
  },
  mounted () {
    // 实现按下回车键后登录
    var that = this
    document.onkeydown = () => {
      var key = window.event.keyCode
      // console.log(key) // 13 是回车键
      if (key === 13) {
        that.getLogin()
      }
    }
  },
  methods: {
    getLogin () {
      // 调用接口
      this.loginLoading = true
      const md5 = crypto.createHash('md5')
      md5.update(this.ruleForm.pass)
      let md5password = md5.digest('hex')
      const value = {account: this.ruleForm.account, password: md5password}
      login(qs.stringify(value)) // 这是一个异步方法！
        .then(res => {
          // console.log('login', res)
          if (res.data.code !== 1000) {
            this.$message({
              center: true,
              type: 'warning',
              message: '密码错误'
            })
          } else {
            sessionStorage.setItem('Token', res.data.data)
            console.log(res.data.data)
            // findByToken(res.data.data)
            //   .then(res => {
            //     console.log('findByToken', res)
            //     sessionStorage.setItem('loginState', JSON.stringify(res.data.data))
            //     const payload = res.data.data
            //     this.$store.commit('insertLoginState', payload)
            //     console.log('state', this.$store)
            //     this.$router.push('/main')
            //   })
            this.$router.push('/main')
          }
          this.loginLoading = false
        }).catch(err => {
          console.log(err)
          this.loginLoading = false
        })

      // // 本地mock 接口挂掉时使用 主要用作进入页面进行页面样式修改
      // this.$axios.post('http://127.0.0.1:7002/api/login/', this.ruleForm) // 这是一个异步方法！
      //   .then(res => {
      //     // console.log(res.data.data)
      //     sessionStorage.setItem('loginState', JSON.stringify(res.data.data))
      //     // const loginState = JSON.parse(sessionStorage.getItem('loginState') || '[]')
      //     // console.log(loginState)
      //     // sessionStorage.setItem('role', res.data.data.role)
      //     const payload = res.data.data
      //     // console.log(payload)
      //     this.$store.commit('insertLoginState', payload)
      //     this.$router.push('/main')
      //   })
    }

    // jump () {
    //   this.getLogin()
    //   setTimeout(() => {
    //     this.$router.push('/main')
    //   }, 100)
    // }
  }
}
</script>

<style scoped>
@import url(./login.css);
</style>
